<template>
  <div class="user-list-container">
    <div v-if="users.length === 0" class="empty-list">
      <UserOutlined class="empty-icon" />
      <p>没有找到相关用户</p>
    </div>

    <div class="user-grid">
      <a-card 
        v-for="u in users"
        :key="u.id"
        class="user-card"
        :bordered="false"
        hoverable
        @click="handleClick(u)"
      >
        <div class="user-info">
          <a-avatar :src="u.avatar" class="user-avatar" size="large" />

          <div class="user-details">
            <h4 class="nickname">{{ u.nickname || u.username || u.phone || '未知用户' }}</h4>
            <div class="subline">
              <span v-if="u.username">@{{ u.username }}</span>
              <span v-if="u.phone" class="sep">•</span>
              <span v-if="u.phone">{{ u.phone }}</span>
              <span v-if="u.deptName" class="sep">•</span>
              <span v-if="u.deptName">{{ u.deptName }}</span>
            </div>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { UserOutlined } from '@ant-design/icons-vue'

interface SearchUserItem {
  id: number
  avatar?: string
  username?: string
  nickname?: string
  phone?: string
  deptName?: string
}

const props = defineProps<{ users: SearchUserItem[] }>()

const emit = defineEmits<{ (e: 'user-view', user: SearchUserItem): void }>()

const handleClick = (user: SearchUserItem) => {
  emit('user-view', user)
}
</script>

<style scoped>
.user-list-container { width: 100%; }
.empty-list { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: #999; text-align: center; }
.empty-icon { font-size: 48px; color: rgba(255, 255, 255, 0.2); margin-bottom: 16px; }
.user-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.user-card { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 12px !important; transition: all .3s !important; cursor: pointer; overflow: hidden; }
.user-card:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 8px 24px rgba(0,0,0,.2) !important; }
.user-info { display: flex; gap: 16px; padding: 12px 16px; align-items: center; }
.user-avatar { border: 2px solid rgba(255, 255, 255, 0.1) !important; flex-shrink: 0; }
.user-details { flex: 1; min-width: 0; }
.nickname { margin: 0 0 6px 0 !important; color: #fff !important; font-size: 16px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subline { color: #bbb; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.sep { opacity: .6; }
@media (max-width: 768px) { .user-grid { grid-template-columns: 1fr; } }
</style>


